<template>
	<view class="flex pay-header font24">
		<view class="pay-header-icon">i</view>
		<view class="pay-header-tips">
			请付款至公司指定账户，避免受骗！
		</view>
	</view>
	<view class="pay-container">
		<view class="pay-container-header flex flex-evenly">
			<view class="text-center">
				<view class="tips font28">总应付金额</view>
				<view class="money font44">￥{{itemDetail.planCollection}}</view>
			</view>
			<view class="pay-container-line"></view>
			<view class="text-center">
				<view class="tips font28">已付款金额</view>
				<view class="money font44">￥{{itemDetail.inFactCollection}}</view>
			</view>
		</view>

		<view class="pay-container-content">
			<view class="header">
				<view class="flex flex-between">
					<view class="font28">{{routeData.title}}</view>
					<wd-tag custom-class="space" type="primary" :color="ccolorList[routeData.status]"
						:bg-color="cbgColorList[routeData.status]">
						{{ ctagNameList[routeData.status] }}
					</wd-tag>
				</view>
			</view>
			<view class="flex-between steps" v-for="(item,index) in itemDetail.collectionNodes">
				<view class="flex flex-column flex-between">
					<view class="pay-header-icon num">{{index+1}}</view>
					<view class="steps-line"></view>
				</view>
				<view class="steps-right">
					<view class="flex flex-between">
						<view class="font28">{{item.receiveTaskName}}</view>
						<!-- 	<wd-tag custom-class="space" type="primary" :color="colorList[item.approvalStatus-1]"
							:bg-color="bgColorList[item.approvalStatus-1]">
							{{ tagNameList[item.approvalStatus-1] }}
						</wd-tag> -->
					</view>
					<view class="flex flex-between font24 steps-money">
						<view>应付：￥{{item.planMoney}}</view>
						<view>实付：￥{{item.collectionMoney}}</view>
					</view>

				</view>
			</view>
		</view>
	</view>
	<view class="pay-footer">
		<view class="pay-footer-but" @click="handleGoto">付款</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getcollectionPlan
	} from "@/api/contract";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const activ = ref(true)

	const ccolorList = ref(["#FF9900", "#409EFF", "#409EFF", "#409EFF", "#909399"])
	const cbgColorList = ref(["#FFF0D9", "#D9EDFF", "#D9EDFF", "#D9EDFF", "#f4f4f5"])
	const ctagNameList = ref(["待生成", "审批中", "待签约", "已签约", "已作废"])

	const colorList = ref(["#909399", "#409EFF", "#14C85C", "#909399"])
	const bgColorList = ref(["#f4f4f5", "#D9EDFF", "#E3F9E9", "#f4f4f5"])
	const tagNameList = ref(["未开始", "进行中", "已完成", "删除"])
	const routeData = ref({})
	const itemDetail = ref({})
	const handleGoto = () => {
		uni.navigateTo({
			url: "/pages/contractManage/payMoney/index"
		})
	}
	const getPlan = async (id) => {
		const {
			data
		} = await getcollectionPlan(id)
		itemDetail.value = data
	}
	onLoad((query) => {
		const dataString = decodeURIComponent(query.data);
		routeData.value = JSON.parse(dataString);
		getPlan(routeData.value.contractNo)
	})
</script>


<style scoped lang="scss">
	.pay {
		&-header {
			padding: 10rpx 34rpx;
			background: #E3F0FE;
			color: #4E5969;
			margin-bottom: 32rpx;

			&-icon {
				width: 28rpx;
				height: 28rpx;
				background: #007DFF;
				border-radius: 50%;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
			}

			&-tips {
				margin-left: 18rpx;
			}
		}

		&-container {
			padding: 0 32rpx 160rpx;

			&-header {
				background: #FFFFFF;
				padding: 24rpx 10rpx 36rpx;
				border-radius: 20rpx;

				.tips {
					color: #3D3D3D;
				}

				.money {
					margin-top: 16rpx;
					font-weight: 500;
					color: #3D3D3D;
				}
			}

			&-line {
				width: 8rpx;
				height: 50rpx;
				background: #F1F4F6;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}

			&-content {
				margin-top: 28rpx;
				padding: 24rpx 32rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.header {
					color: #3D3D3D;
					padding-bottom: 20rpx;
					margin-bottom: 40rpx;
					border-bottom: 2rpx solid #F1F5F9;
				}

				.num {
					width: 44rpx;
					height: 44rpx;
				}

				.steps {
					display: flex;
					margin-bottom: 16rpx;

					.pay-num-info {
						background: #F3F3F3;
						color: rgba(0, 0, 0, 0.4);
					}

					&-right {
						width: calc(100% - 60rpx);
						color: #606266;
						padding-bottom: 32rpx;
					}

					&-money {
						background: #F1F4F6;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						padding: 20rpx 40rpx;
						margin: 20rpx 0;
						color: #606266;

						&-info {
							background: #F3F3F3;
						}
					}

					.time {
						color: #86909C;
					}

					&-line {
						width: 2rpx;
						height: calc(100% - 60rpx);
						background: #DCDCDC;
					}
				}
			}
		}

		&-footer {
			display: flex;
			justify-content: center;
			width: 100%;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(78, 89, 105, 0.05);

			&-but {
				width: 686rpx;
				height: 80rpx;
				background: #007DFF;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-size: 32rpx;
				margin: 24rpx 0 40rpx;
			}
		}
	}
</style>